<template>
  <Head />
  <div class="top">
    <div class="item" v-for="(item, index) in rankListTop" :key="index">
      <span class="money">{{ item.money }}</span>
      <span class="address">{{ formatAddress(item.address) }}</span>
    </div>
  </div>
  <div class="list">
    <div class="item" v-for="(item, index) in rankListList" :key="index">
      <div class="index">{{ index + 4 }}</div>
      <div class="money">{{ item.money }}</div>
      <div class="address">{{ formatAddress(item.address) }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Async_ranking } from "@/server/user";
import { IRankItem } from "@/model/user";
import { formatAddress } from "@/utils/kit";

const rankListTop = ref([]);
const rankListList = ref<IRankItem[]>([]);

const getList = async () => {
  try {
    let res: IRankItem[] = await Async_ranking();
    if (res) {
      let rankList = res || [];
      rankListTop.value = rankList.slice(0, 3);
      rankListList.value = rankList.slice(3, rankList.length);
    } else {
      rankListTop.value = [{}, {}, {}];
    }
  } catch (error) {
    console.error(error);
  }
};

onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
.top {
  padding: 12px;
  display: grid;
  grid-template-columns: 100fr 121fr 97fr;
  grid-gap: 8px;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    position: relative;
    .money {
      font-size: 30px;
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #f6d664;
      font-family: DINPro-Black;
    }
    .address {
      position: absolute;
      top: 70%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      overflow-wrap: break-word;
      color: #f9fafa;
      font-size: 12px;
      text-align: center;
    }
  }
  .item:nth-child(1) {
    height: 186px;
    background: url("@/assets/images/rank/rank0.png");
    background-size: 100% 100%;
    margin-top: 19px;
    grid-column: 2/3;
    grid-row: 1/2;
  }
  .item:nth-child(2) {
    height: 178px;
    background: url("@/assets/images/rank/rank1.png");
    background-size: 100% 100%;
    margin-top: 51px;
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .item:nth-child(3) {
    height: 168px;
    background: url("@/assets/images/rank/rank2.png");
    background-size: 100% 100%;
    margin-top: 61px;
    grid-column: 3/4;
    grid-row: 1/2;
  }
}
.list {
  padding: 12px 12px 40px 12px;
  .item {
    font-size: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    background: #162139;
    margin-bottom: 5px;
    border-radius: 4px;
    .index {
      background: rgba(152, 167, 181, 0.5);
      color: #fff;
      border-radius: 4px;
      padding: 4px 8px;
      text-align: center;
      margin-right: 12px;
    }
    .money {
      color: #fff;
      font-weight: bold;
      color: #f6d664;
      font-family: DINPro-Black;
      font-weight: 14px;
    }
    .address {
      color: #76819d;
      margin-left: auto;
      font-size: 12px;
    }
  }
}
</style>
